<!--  -->
<template>
	<div class="page_wrap">
		<header>
			<div class="h_left">
				<i class="iconfont iconarrowLeft-fill" @click="$router.go(-1)"></i>
			</div>
			<div class="h_center"><span>我的消息</span></div>
			<div class="h_right">
				<i class="iconfont icongengduo" style="visibility: hidden;"></i>
			</div>
		</header>

		<div class="main">
			<ul>
				<li>
					<div class="li_left">
						<img src="../../../assets/images/userCenter/comfirmoder_icon_oder.png" />
						<span>交易消息</span>
					</div>
					<div class="li_right">
						<i class="iconfont iconarrowRight-fill"></i>
					</div>
				</li>
				<li>
					<div class="li_left">
						<img src="../../../assets/images/userCenter/refund.png" />
						<span>退款</span>
					</div>
					<div class="li_right">
						<i class="iconfont iconarrowRight-fill"></i>
					</div>
				</li>
				<li>
					<div class="li_left">
						<img src="../../../assets/images/userCenter/logistics_normal.png" />
						<span>物流消息</span>
					</div>
					<div class="li_right">
						<i class="iconfont iconarrowRight-fill"></i>
					</div>
				</li>
				<li>
					<div class="li_left">
						<img src="../../../assets/images/userCenter/message_icon_im_default.png" />
						<span>我的咨询</span>
					</div>
					<div class="li_right">
						<i class="iconfont iconarrowRight-fill"></i>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import { Toast, ActionSheet } from 'vant';

	export default {
		data() {
			return {};
		},
		watch: {},
		computed: {},
		components: {},
		beforeRouteEnter(to, from, next) {
			next();
		},
		beforeRouteLeave(to, from, next) {
			next();
		},
		activated() {},
		deactivated() {},
		created() {},
		mounted() {},
		methods: {}
	}
</script>

<style lang='scss' scoped>
	@import '~@/assets/css/mixin';
	.page_wrap {
		width: 100%;
		height: 100%;
	}
	
	.main {
		height: 100%;
		padding: rem(90) 0 0 0;
		.all_order {
			.li_right {
				span {
					color:  $theme-color;
				}
			}
		}
		ul {
			margin: 0 0 rem(20) 0;
			li {
				height: rem(100);
				background: #fff;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 rem(20);
				box-sizing: border-box;
				border-bottom: rem(1) solid #eee;
				&:last-child {
					border: none;
				}
				.li_left {
					display: flex;
					align-items: center;
					img {
						width: rem(50);
						margin: 0 rem(10) 0 0;
					}
					span {
						font-size: rem(28);
						color: $fc;
					}
				}
				.li_right {
					display: flex;
					align-items: center;
					span {
						font-size: rem(28);
						color: #999;
						margin: 0 rem(20) 0 0;
					}
					i {
						font-size: rem(36);
						color: $fc;
					}
					.pic {
						width: rem(90);
						height: rem(90);
						margin: 0 rem(20) 0 0;
						display: flex;
						justify-content: center;
						align-items: center;
						overflow: hidden;
						border-radius: 50%;
						background: #F8F8F8;
						position: relative;
						img {
							width: 100%;
						}
						input {
							width: 0;
							height: 0;
							position: absolute;
							z-index: -2;
						}
						label {
							position: absolute;
							z-index: 1;
							width: 100%;
							height: 100%;
							background: #000;
							opacity: 0;
						}
					}
				}
			}
		}
	}
</style>